<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">List Index</div>
      </div>
    </div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list simple-list contacts-list">
        <div class="list-group">
          <ul>
            <li class="list-group-title">A</li>
            <li>Aaron</li>
            <li>Adam</li>
            <li>Aiden</li>
            <li>Albert</li>
            <li>Alex</li>
            <li>Alexander</li>
            <li>Alfie</li>
            <li>Archie</li>
            <li>Arthur</li>
            <li>Austin</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">B</li>
            <li>Benjamin</li>
            <li>Blake</li>
            <li>Bobby</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">C</li>
            <li>Caleb</li>
            <li>Callum</li>
            <li>Cameron</li>
            <li>Charles</li>
            <li>Charlie</li>
            <li>Connor</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">D</li>
            <li>Daniel</li>
            <li>David</li>
            <li>Dexter</li>
            <li>Dylan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">E</li>
            <li>Edward</li>
            <li>Elijah</li>
            <li>Elliot</li>
            <li>Elliott</li>
            <li>Ethan</li>
            <li>Evan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">F</li>
            <li>Felix</li>
            <li>Finlay</li>
            <li>Finley</li>
            <li>Frankie</li>
            <li>Freddie</li>
            <li>Frederick</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">G</li>
            <li>Gabriel</li>
            <li>George</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">H</li>
            <li>Harley</li>
            <li>Harrison</li>
            <li>Harry</li>
            <li>Harvey</li>
            <li>Henry</li>
            <li>Hugo</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">I</li>
            <li>Ibrahim</li>
            <li>Isaac</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">J</li>
            <li>Jack</li>
            <li>Jacob</li>
            <li>Jake</li>
            <li>James</li>
            <li>Jamie</li>
            <li>Jayden</li>
            <li>Jenson</li>
            <li>Joseph</li>
            <li>Joshua</li>
            <li>Jude</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">K</li>
            <li>Kai</li>
            <li>Kian</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">L</li>
            <li>Leo</li>
            <li>Leon</li>
            <li>Lewis</li>
            <li>Liam</li>
            <li>Logan</li>
            <li>Louie</li>
            <li>Louis</li>
            <li>Luca</li>
            <li>Lucas</li>
            <li>Luke</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">M</li>
            <li>Mason</li>
            <li>Matthew</li>
            <li>Max</li>
            <li>Michael</li>
            <li>Mohammad</li>
            <li>Mohammed</li>
            <li>Muhammad</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">N</li>
            <li>Nathan</li>
            <li>Noah</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">O</li>
            <li>Oliver</li>
            <li>Ollie</li>
            <li>Oscar</li>
            <li>Owen</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">R</li>
            <li>Reuben</li>
            <li>Riley</li>
            <li>Robert</li>
            <li>Ronnie</li>
            <li>Rory</li>
            <li>Ryan</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">S</li>
            <li>Samuel</li>
            <li>Sebastian</li>
            <li>Seth</li>
            <li>Sonny</li>
            <li>Stanley</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">T</li>
            <li>Teddy</li>
            <li>Theo</li>
            <li>Theodore</li>
            <li>Thomas</li>
            <li>Toby</li>
            <li>Tommy</li>
            <li>Tyler</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">W</li>
            <li>William</li>
          </ul>
        </div>
        <div class="list-group">
          <ul>
            <li class="list-group-title">Z</li>
            <li>Zachary</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {};
    },
    on: {
      pageBeforeRemove(e, page) {
        var self = this;
        // Destroy list index instance on page remove
        if (self.listIndex) {
          self.listIndex.destroy();
        }
      },
      pageInit: function (e, page) {
        var self = this;
        var app = self.$app;
        // Create list index instance
        self.listIndex = app.listIndex.create({
          // List el where to look indexes and scroll for
          listEl: self.$el.find('.list'),
          // ".list-index" element
          el: self.$el.find('.list-index'),
          // Generate indexes automatically based on ".list-group-title" and ".item-divider"
          indexes: 'auto',
          // Scroll list on indexes click and touchmove
          scrollList: true,
          // Enable bubble label when swiping over indexes
          label: true,
        });
      }
    },
  }
</script>